<template>
  <div class="learun-message learun-header--icon-btn" @click="handleOpenMessge">
    <div class="learun-header--icon-btn-wraper">
      <i class="learun-icon-inform"></i>
      <el-badge v-if="hasMsg" class="badge" is-dot></el-badge>
    </div>

    <!--消息-->
    <l-drawer
      :title="$t('站内消息')"
      :visible.sync="messageVisible"
      :showOk="false"
      :showClose="false"
      size="360px"
      @opened="handleMessageOpened"
    >
      <message-list
        ref="messageList"
        @close="
          () => {
            messageVisible = false;
          }
        "
      ></message-list>
    </l-drawer>
  </div>
</template>

<script>
import MessageList from "./messageList.vue";
export default {
  name: "chat",
  components: {
    MessageList,
  },
  data() {
    return {
      messageVisible: false,
    };
  },
  computed: {
    hasMsg() {
      return this.$store.state.im.systemMsgNum > 0;
    },
  },
  created(){
    this.init()
  },
  methods: {
    init() {
      //console.log('init')
      // 监听消息事件
      this.lr_OnEvent("learun-im-system-message", () => {
        this.$refs.messageList && this.$refs.messageList.refresh();
        //console.log('learun-im-system-message')
        this.$store.dispatch("im/refreshSystemMsgNum");
      });
      // 刷新消息列表
      this.$store.dispatch("im/refreshSystemMsgNum");
    },
    // 系统消息
    handleOpenMessge() {
      this.messageVisible = true;
    },
    handleMessageOpened() {
      this.$refs.messageList.refresh();
    },
  },
};
</script>
<style lang="scss" scoped>
.learun-message {
  position: relative;

  .badge {
    display: block;
    position: absolute;
    top: -2px;
    right: 8px;
  }
}
</style>
